<!--@author vidy3587@gmail.com-->

<template>
  <div class="with-banner-padding has-bottom-out">
    <div class="publish-header publish-container">
      <div class="header-container">
        <div class="header-item row">
          <div>指导单位：</div>
          <div class="col-1 header-value">东南大学校团委</div>
        </div>
        <div class="header-item row">
          <div>主办单位：</div>
          <div class="col-1 header-value">南京戏度文化科技有限公司</div>
        </div>
      </div>
    </div>
    <div class="with-repeat-bg publish-container ">
      <div class="publish-title">
        获奖公布
      </div>
      <div class="award-list top-3">
        <div class="top-award-item" v-for="item in top3" :key="item.number">
          <div class="award-badge " :class="['rank'+item.rank]">
            <img :src="top3RankImages[item.rank-1]" alt="">
          </div>
          <div class="award-item col-1 row">
            <div class="col-1">{{ item.number }}号</div>
            <div class="col-1">第{{ item.rank }}名</div>
            <div class="col-1">{{ item.nickName }}</div>
            <div class="col-1 avatar-col"><img class="award-avatar" :src="item.headImgUrl" alt=""></div>
          </div>
        </div>

      </div>
      <div class="award-list excellenceAward">
        <div class="row">
          <div class="excellenceAward-title">
            <div class="excellenceAward-title-container">
              优
              秀
              奖
            </div>

          </div>
          <div class="col-1 excellenceAward-list">
            <Marquee :animate="excellenceAward.length>=5">
              <div v-for="item in excellenceAward" :key="item.number" class="award-item col-1 row">
                <div class="col-1">{{ item.number }}号</div>
                <div class="col-1">第{{ item.rank }}名</div>
                <div class="col-1">{{ item.nickName }}</div>
                <div class="col-1 avatar-col"><img class="award-avatar" :src="item.headImgUrl" alt=""></div>
              </div>
            </Marquee>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import rank1 from "@/assets/rank1.png";
import rank2 from "@/assets/rank2.png";
import rank3 from "@/assets/rank3.png";
import Marquee from "@/core/components/Marquee";

export default {
  name: "Publish",
  components: {
    Marquee
  },
  data() {
    return {
      /**
       *@typedef AwardPlayer
       *@property {number} number
       *@property {number} rank
       *@property {string} nickName
       *@property {string} headImgUrl
       */
      /**
       * @description 获奖选手
       * @type {AwardPlayer[]}
       **/
      awardList: [],
      top3RankImages: [
        rank1,
        rank2,
        rank3
      ]
    }
  },
  created() {
    this.getAWardList();
  },
  computed: {
    top3() {
      return this.awardList.slice(0, 3);
    },
    /**@description 优秀奖*/
    excellenceAward() {
      return this.awardList.slice(3, this.awardList.length);
    }

  },
  methods: {
    /**@description 前三名*/
    getAWardList() {
      this.awardList = [
        {
          nickName: "vidy",
          rank: 1,
          number: 1,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 2,
          number: 2,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 3,
          number: 3,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 4,
          number: 4,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        }, {
          nickName: "vidy",
          rank: 5,
          number: 5,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 6,
          number: 6,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 7,
          number: 7,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        }, {
          nickName: "vidy",
          rank: 8,
          number: 8,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 9,
          number: 9,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        }, {
          nickName: "vidy",
          rank: 10,
          number: 10,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 11,
          number: 11,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        },
        {
          nickName: "vidy",
          rank: 12,
          number: 12,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        }, {
          nickName: "vidy",
          rank: 13,
          number: 13,
          headImgUrl: "https://comp-public-prod.obs.cn-east-3.myhuaweicloud.com/2021/06/17/b3TBf4aFmQDetrsK.jpg",
        }
      ]
    },

  }
}
</script>

<style scoped lang="scss">


.header-container {
  width: px2rem(527px);
  height: px2rem(119px);
  color: $lightFontColor;
  font-size: px2rem(30px);
  margin: 0 auto;
  transform: translateY(px2rem(86px));

  .header-value {
    color: $lightWarmColor;
  }
}

.publish-title {
  text-align: center;
  color: $lightWarmColor;
  font-size: px2rem(48px);
  line-height: px2rem(52px);
}

.top-award-item {
  display: flex;
  flex-direction: row;
  background: #1246CD;
  border-radius: px2rem(55px);
  width: px2rem(547px);
  height: px2rem(70px);
  margin-top: px2rem(38px);
}

.award-list {
  width: px2rem(547px);
  margin: 0 auto;
}

.publish-container {
  //width: px2rem(603px);
  padding-left: px2rem(26px);
}

.award-item {
  .col-2 {
    justify-content: flex-end;
  }

  .col-1, .col-2 {
    box-sizing: border-box;
    color: $lightFontColor;
    font-size: px2rem(24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: px2rem(70px);

    &.avatar-col {
      padding-right: px2rem(24px);
      justify-content: flex-end;

    }
  }
}

.award-avatar {
  width: px2rem(52px);
  height: px2rem(52px);
  border-radius: px2rem(5px);
  justify-content: flex-end;
  object-fit: cover;
}

.rank {

}

.rank1 {

}

.award-badge {
  padding-left: px2rem(13px);
  //padding-right: px2rem(17px);
  width: px2rem(110px);
  height: px2rem(70px);

  img {
    width: px2rem(110px);
  }

}

.rank1 {
  img {

    transform: translateY(px2rem(-10px));
  }
}

.excellenceAward-title {
  display: inline-block;
  width: px2rem(123px);
  height: px2rem(123px);
  color: $lightWarmColor;
  font-size: px2rem(48px);
  line-height: px2rem(70px);

}

.excellenceAward-title-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1B59E8;
  border-radius: px2rem(10px);
  width: px2rem(66px);
  height: px2rem(398px);
  margin-top: px2rem(36px);
  margin-left: px2rem(42px);
  text-align: center;
}

.excellenceAward {
  margin-top: px2rem(35px);
  width: px2rem(547px);
  height: px2rem(476px);
  background: #1246CD;
  border-radius: px2rem(10px);
  overflow: hidden;
}

.excellenceAward-list {
  margin-top: px2rem(39px);

  .award-item {
    margin-bottom: px2rem(10px);
  }
}
</style>